<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>量化分析-
        <#if stock??>${stock.name}
            <#else>${code!""}
        </#if>
        历史分红
    </title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
    <script src="/plugs/echar/infographic.js"></script>
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<#if msg??>
    <h3 style="color:red;" class="text-center">${msg}</h3>
</#if>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:400px;"></div>

<div class="container-fluid">
    <#if rows??>
        <table class="table table-striped table-hover">
            <thead>
            <th>报告期</th>
            <th>业绩披露日期</th>
            <th>方案</th>
            <th>股息率</td>
            <th>除权除息日</td>
            <th>方案进度</td>
            <th>来源</td>

            </thead>
            <#list rows as row>
                <tr>
                    <td>${row.title}</td>
                    <td>${row.releaseDate}</td>
                    <td>${row.plan}</td>
                    <td>${row.percent}%</td>
                    <td>${row.cxcqr}</td>
                    <td>${row.progress}</td>
                    <td>${row.from}</td>
                </tr>
            </#list>
        </table>
    </#if>
</div>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'),'infographic');

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '<#if stock??>${stock.name}<#else>${code!""}</#if> - 各年度分红情况',
            subtext: '',
            x:'center',
            y:'top',
            textAlign:'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['分红情况']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [${year}]
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [
            {
                name: '年度分红',
                type: 'line',
                data: [${percent}],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                },
                areaStyle: {}
            }

        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>